/**
 * Created by Administrator on 2019/9/11.
 */
//数据
let lists = ["学习 JavaScript","学习 CSS3","学习 HTML5"];

function d() {
    //先清空ul里面的li，然后再用for循环添加li
    document.querySelector('#ul').innerHTML = '';

    //创建一个for循环
    for(let i = 0; i<lists.length;i++){
        //创建li标签
        let li = document.createElement('li');
        li.classList.add('list-group-item');
        li.classList.add('d-flex');
        li.classList.add('justify-content-between');
        li.classList.add('align-items-center');

        let span = document.createElement('span');
        let spanText = document.createTextNode(lists[i]);
        //把文本内容，追加到创建的span标签里面
        span.appendChild(spanText);
        //console.log(span);

        span.addEventListener('dblclick',function () {
            console.log(this);
            this.setAttribute('contenteditable',true);
        });


        let button = document.createElement('button');
        button.type = 'button';
        button.classList.add('close');
        //let buttonText = document.createTexNode('&times')
        //button.appendChild(buttonText);
        button.innerHTML='&times';


        //给删除按钮创建一个点击事件
        button.addEventListener('click',function () {
            console.log(i);
            //删除一条指定的数据
            lists.splice(i,1);
            //把数组的数据展示到前台
            //把lists数组的数据，显示到前台
            d()
        })

        li.appendChild(span);
        li.appendChild(button);
        console.log(li);

        let ul = document.querySelector('#ul');
        ul.appendChild(li);
    }
}
d()
let ipt = document.querySelector('#ipt');
let btn = document.querySelector('#btn');
btn.addEventListener('click',function () {
    //把表单的数据放进数组
    if (ipt.value != ''){
        lists.push(ipt.value);
    }else{
        alert("不可以为空。");
    }
    //把lists数组的数据，显示到前台
    d()
})